import * as React from 'react';
import { get, partial, invoke } from 'lodash';
import { Tooltip, Button } from 'antd';

import Test from '../Test';
import EditWord from '../common/EditWord';

export default class Tpl1 extends React.Component {
  RefEditWord: any;
  renderContent = (testProps: any, testOwnProps: any) => {
    const { testProfile, updateTest, fetchTestDetail } = testProps;
    const options = get(testProfile, 'content.options', []);

    return (
      <div className="text-center test-parser-sub-title">
        <h4 className="text-left test-parser-sub-title">
          单词&nbsp;&nbsp;
          {this.renderAction(options.length > 0)}
        </h4>
        <EditWord
          selectMax={10}
          words={options}
          handleCallback={(options: any) => {
            let { content } = testProfile;
            content = { ...content, options };
            updateTest({ content });
          }}
          ref={(editWord: any) => {
            this.RefEditWord = editWord;
          }}
        />
      </div>
    );
  };

  renderAction(disabled: boolean) {
    return (
      <Tooltip key="add word" title="添加评测单词">
        <Button
          disabled={disabled}
          shape="circle"
          type="primary"
          icon="plus"
          onClick={partial(invoke, this, 'RefEditWord.addWord')}
        />
      </Tooltip>
    );
  }

  render() {
    return <Test {...this.props}>{this.renderContent}</Test>;
  }
}
